<template>
    <view>
        <view>
			<image src="https://tzdj.1qit.com/assets/wx_imgs/logo/logo1.png" mode="widthFix" class="w-200 logo m-t-300 m-b-150"></image>
		</view>
		<view class="sys_btn"  @click="loginTest" v-show="loginShow">
		    <view class="wx_login w-700 m-l-25 m-r-25">
		    	<u-icon name="weixin-fill" color="#fff" size="35" class="p-r-20"></u-icon>
		    	<text class="f-32">微信登录</text>
		    </view>
		</view>
        <button class="sys_btn" open-type="getPhoneNumber" lang="zh_CN" @getphonenumber="getPhoneNumber" v-show="phoneShow">
            <view class="wx_login w-700  m-r-25">
				<u-icon name="phone-fill" color="#fff" size="35" class="p-r-20"></u-icon>
				<text class="f-32">手机授权登录</text>
            </view>
        </button>
        <view class="getAuthorization" v-show="getInfoShow">
            <view class="getAuthorizationBox m-l-25 p-25">
                <view class="getAuthorizationText p-b-25 f-32">访问授权</view>
                <view class="getAuthorizationDesc p-t-50 p-b-50 f-26">您访问的服务，需要授权获取微信信息</view>
                <view class="getAuthorizationButtons">
                    <view class="buttons1" @click="future">以后再说</view>
                    <button open-type="getUserInfo" lang="zh_CN" @getuserinfo="appLoginWx" class="buttons2">立即授权</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data(){
        return{
            getInfoShow:false,
			code:"",
            wxInfo:{
                code:"",
            },
            userInfo:{},
			loginShow:true,
			phoneShow:false,
        }
    },
	onLoad(option){
		console.log('logincode',option)
		this.code = option.code
	},
    onShow(){
        this.appLoginWx()
    },
    methods: {
        appLoginWx() {
            let _this = this;
            uni.getProvider({
                service: 'oauth',
                success: function(res) {
                    if (~res.provider.indexOf('weixin')) {
                        uni.login({
                            provider: 'weixin',
                            success: res2 => {
								console.log(res2)
								_this.getInfoShow = false
								_this.wxInfo.code = res2.code
                            },
                            fail: () => {
                                uni.showToast({ title: '微信登录授权失败', icon: 'none' });
                            }
                        });
                    } else {
                        uni.showToast({
                            title: '请先安装微信或升级版本',
                            icon: 'none'
                        });
                    }
                }
            });
        },
		loginTest(){
			uni.getUserProfile({
				desc:'登录',
				success:(res)=>{
					console.log(res);
					let info = res.userInfo
					this.userInfo = info
					this.loginShow = !this.loginShow
					this.phoneShow= !this.phoneShow
				},
				fail:(res)=>{
					uni.showToast({
						title:"拒绝会导致无法登录哦~",
						icon:"none"
					})
				}
			});
		},
        getPhoneNumber(e){
			console.log(e)
            if(e.detail.errMsg ===  "getPhoneNumber:ok" ){
                let iv = e.detail.iv
                let encryptedData = e.detail.encryptedData
                this.getUserInfo(iv,encryptedData)
            }else{
                console.log('拒绝')
                uni.showToast({
                    title:"拒绝会导致无法登录哦~",
					icon:"none"
                })
            }
        },
        async getUserInfo(iv,encryptedData){
			let result = await this.$request.post('/api/wx/login',{
				code:this.wxInfo.code,
				avatar:this.userInfo.avatarUrl,
				nickname:this.userInfo.nickName,
				encryptedData:encryptedData,
				iv:iv
			})
			console.log(result)
			if(result.data.code === 1){
				this.$store.commit('getUserInfo', result.data.data.userinfo);
				uni.setStorage({
					key: 'token',
					data: result.data.data.userinfo.token,
					success: function () {
						uni.getStorage({
							key: 'token',
							success: function (res) {
								console.log('当前token',res.data);
							}
						});
					}
				});
				uni.showToast({
					title:"登录成功"
				})
				uni.navigateBack()
			}
        },
        future(){
            uni.navigateBack({
                delta:1
            })
        },
    }
};
</script>

<style lang="scss">
    .getAuthorization{
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom: 0;
        width: 750;
        height:100vh;
        background:rgba(0,0,0,.8);
        display: flex;
        align-items: center;
        .getAuthorizationBox{
            width:700rpx;
            background: #fff;
            border-radius: 10rpx;
            color:#333;
            .getAuthorizationText{
                text-align: center;
                border-bottom: 1px solid #f6f6f6;
            }
            .getAuthorizationDesc{}
            .getAuthorizationButtons{
                display: flex;
                justify-content: space-around;
                text-align: center;
                .buttons1{
                    line-height: 80rpx;
                    width:200rpx;
                    height:80rpx;
                    background:#f5f6f6;
                    color:#333;
                    font-size: 26rpx !important;
                    border-radius: 5rpx;
                }
                .buttons2{
                    line-height: 80rpx;
                    width:200rpx;
                    height:80rpx;
                    padding:0;
                    margin:0;
                    display: inline-block;
                    font-size: 26rpx !important;
                    border:none;
                    border-radius: 5rpx;
                    background:#001846;
                    color:#fff;
                }
            }
        }
    }
    .logo {
        display: block;
        margin: 0 auto;
    }
    .wx_login {
        background: #0055fe;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 90rpx;
        border-radius: 4rpx;
    }
    .desc {
        line-height: 50rpx;
        font-family: '微软雅黑';
    }
    .color1 {
        color: #858585;
    }
    .color2 {
        color: #fa3534;
    }
    .sys_btn {
        border: none;
        background: none;
        color: #fff;
    }
</style>
